<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Online Music Player</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #a18cd1, #fbc2eb);
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        h1,
        h2 {
            text-align: center;
            color: #333;
        }

        input[type="text"] {
            padding: 8px;
            width: calc(100% - 100px);
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            padding: 8px 16px;
            background-color: #6c5ce7;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #showAllSongs {}

        button:hover {
            background-color: #4834d4;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            padding: 10px;
            border-bottom: 1px solid #ccc;
            transition: background-color 0.3s;
            cursor: pointer;
            position: relative;
        }

        li:last-child {
            border-bottom: none;
        }

        li:hover {
            background-color: #f9f9f9;
        }

        #audioPlayer {
            width: 100%;
            margin-top: 20px;
        }

        #nowPlaying {
            text-align: center;
            margin-top: 10px;
            color: #333;
        }

        #allSongsList {
            margin-top: 20px;
        }

        #allSongsList li {
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        #allSongsList li:hover {
            background-color: #e0e0e0;
        }

        .favoriteButton {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background-color: transparent;
            border: none;
            color: #a5a0c9;
            font-size: 1.2em;
            cursor: pointer;
        }

        .favoriteButton:hover {
            color: #aba4d5;
        }

        .playButton {
            position: absolute;
            top: 50%;
            right: 50px;
            transform: translateY(-50%);
            background-color: transparent;
            border: none;
            color: #ddb3ee;
            font-size: 1.2em;
            cursor: pointer;
        }

        .playButton:hover {
            color: #bac3bf;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>音乐播放器</h1>
        <input type="text" id="searchInput" placeholder="Search...">
        <button onclick="search()">搜索</button>
        <ul id="songList"></ul>
    </div>

    <div class="container">
        <h2>添加新的歌曲</h2>

        <iframe class="update" frameborder="0" name="update" style="display: none;"></iframe>
        <form target="update" id="update" method="POST" enctype="multipart/form-data" action="/music/upload">
            <input type="file" name="file" id="songTitleInput" value="选择音乐" />
            <input type="text" name="singer" id="artistInput" placeholder="请输⼊歌⼿名" />
            <input id="sub" type="submit" value="添加">
        </form>
    </div>


    <div class="container">
        <h2>正在播放</h2>
        <p id="nowPlaying"></p>
        <audio controls id="audioPlayer">
            Your browser does not support the audio element.
        </audio>
    </div>

    <div class="container">
        <h2>喜欢的音乐</h2>
        <span><button id="showAllSongs" onclick="showAllSongs()">显示</button></span>
        <ul id="allSongsList"></ul>

    </div>
    <!-- 引入jquery -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js" charset="UTF-8"></script>

    <script>
        //form表单回调函数
        update();
        function update() {
            $(".update").load(function () {
                document.getElementById('songTitleInput').value = '';
                document.getElementById('artistInput').value = '';
                alert("添加成功");
            });
        }
        var songs = [];

        function search() {
            // $.ajax({
            //     url: /music/get

            // });
            var searchTerm = document.getElementById('searchInput').value;
            // 实现搜索功能并显示搜索结果
            // 这里只是一个示例
            var searchResults = [
                // { title: '热烈的少年', artist: '某人', src: 'D:\\music\\热烈的少年.mp3', liked: false },
                // { title: '青花', artist: '小俊', src: 'D:\\music\\青花.mp3', liked: false }
            ];
            displaySearchResults(searchResults);
        }

        function displaySearchResults(results) {
            var songList = document.getElementById('songList');
            songList.innerHTML = '';
            results.forEach(function (result) {
                var li = createSongListItem(result);
                songList.appendChild(li);
            });
        }

        // function addSong() {

        //     var title = document.getElementById('songTitleInput').value;
        //     var artist = document.getElementById('artistInput').value;
        //     // 假设添加的音乐文件位于服务器上的"music"文件夹中
        //     var src = 'music/' + title + '.mp3';
        //     songs.push({ title: title, artist: artist, src: src, liked: false });
        //     // 清空输入框
        //     document.getElementById('songTitleInput').value = '';
        //     document.getElementById('artistInput').value = '';
        //     // 更新显示
        //     displaySongs();
        // }

        function displaySongs() {
            var songList = document.getElementById('songList');
            songList.innerHTML = '';
            songs.forEach(function (song) {
                var li = createSongListItem(song);
                songList.appendChild(li);
            });
        }

        function createSongListItem(song) {
            var li = document.createElement('li');
            li.textContent = song.title + ' - ' + song.artist;
            li.onclick = function () {
                playSong(song);
            };

            var playButton = document.createElement('button');
            playButton.textContent = '播放';
            playButton.classList.add('playButton');
            playButton.onclick = function (event) {
            };
            li.appendChild(playButton);

            // 添加喜欢按钮
            var favoriteButton = document.createElement('button');
            favoriteButton.classList.add('favoriteButton');
            favoriteButton.textContent = '♥';
            favoriteButton.onclick = function (event) {
                event.stopPropagation(); // 防止触发 li 的点击事件
                likeMusic(song);
            };
            li.appendChild(favoriteButton);
            return li;
        }

        //播放
        function playSong(song) {
            var audioPlayer = document.getElementById('audioPlayer');
            audioPlayer.src = song.src;
            audioPlayer.play();
            document.getElementById('nowPlaying').textContent = '正在播放: ' + song.title + ' - ' + song.artist;
        }

        function toggleLike(song) {
            song.liked = !song.liked;
        }

        function likeMusic(song) {
            // 在这里添加您希望执行的跳转操作
            alert('您喜欢了这首歌曲！');
        }
        function NOlikeMusic(song) {
            // 在这里添加您希望执行的跳转操作
            alert('您不喜欢了这首歌曲！');
        }

        function showAllSongs() {
            var allSongsList = document.getElementById('allSongsList');
            allSongsList.innerHTML = '';
            songs.forEach(function (song) {
                var li = document.createElement('li');
                li.textContent = song.title + ' - ' + song.artist;
                var NOfavoriteButton = document.createElement('button');
                NOfavoriteButton.classList.add('favoriteButton');
                NOfavoriteButton.textContent = '取消喜欢';
                NOfavoriteButton.onclick = function (event) {
                    event.stopPropagation(); // 防止触发 li 的点击事件
                    NOlikeMusic(song);
                };
                li.appendChild(NOfavoriteButton);
                allSongsList.appendChild(li);
            });
        }






    </script>
</body>

</html>